<template>
    <up-popup class="hk1980Popup" :safeAreaInsetTop="true" mode="top" :show="show" :overlay="false" :round="10" @close="close" @open="openCallback">
        <up-navbar bgColor="#7099B4" :safeAreaInsetTop="true" >
            <template #left>
              <up-icon size="35" :name="hk1980"></up-icon>
              <up-text text="香港1980方格網坐標" color="#fff"></up-text>
            </template>

          <template #right>
              <up-icon size="28" :name="closePng" color="#fff"  @click="close"></up-icon>
          </template>
        </up-navbar>
      <view class="content">
        <bangs/>
        <up-input placeholder="例如：832205" type="number" :focus="true" :border="'surround'" v-model="lng">
          <template #prefix>
            <up-text
              text="坐標北(米)："
              margin="0 3px 0 0"
              color="#323233"
            ></up-text>
          </template>
        </up-input>
        <up-gap height="20" bgColor="#ffffff00"></up-gap>
        <up-input placeholder="例如：849926" type="number" :border="'surround'" v-model="lat">
          <template #prefix>
            <up-text
              text="坐標東(米)："
              margin="0 3px 0 0"
              color="#323233"
            ></up-text>
          </template>
        </up-input>
        <up-gap height="30" bgColor="#ffffff00"></up-gap>
          <up-row class="hk1980but">
              <up-col span="6">
                  <up-button text="取消" color="rgb(112, 153, 180)" @click="close"></up-button>
              </up-col>
              <up-col span="6">
                  <up-button @click="onClick">
                    <up-icon :name="searchPng" size="25" color="rgb(112, 153, 180)"></up-icon>
                  </up-button>
              </up-col>
          </up-row>
      </view>
  </up-popup>
</template>

<script setup  lang="ts">
import { ref } from 'vue';
import bangs from '@/pages/common/head/bangs.vue'
import closePng from '@/static/images/close.png'
import hk1980 from '@/static/icon/hk1980.png'
import searchPng from '@/static/images/search1.png'
import { mapStore } from '@/stores'
// import proj4 from 'proj4'
import { HKMAPtransform } from '@/api/system/map'

const mapStoreFun = mapStore();

// 创建响应式数据
const show = ref(false);
const lng = ref<number | null>(null);
const lat = ref<number | null>(null);

const emit = defineEmits<{
  (e: 'click', data: any): void
}>()

// 定义方法
function open() {
  mapStoreFun.SUM_MAPTYPE(1)
  show.value = true
}

function openCallback() {
}

function close() {
  mapStoreFun.SUM_MAPTYPE(-1);
  show.value = false;
  lng.value = null;
  lat.value = null;
}

function onClick() {
  // 处理空值，提供默认值或提示
  if (!lat.value || !lng.value) {
    // 为空时显示提示（使用 uni-app 的 showToast）
    uni.showToast({
      title: '坐標不能為空',
      icon: 'none',
      duration: 2000
    });
    return;
  }  HKMAPtransform(lat.value, lng.value).then((data:any) => {
      const searchInfo=data.data
      emit('click', {center:[searchInfo.wgsLong,searchInfo.wgsLat],title:lng.value+" N , "+lat.value+" E"})
  }).catch(error => {
      emit('click', {center:[]})
      console.error("获取数据失败:", error);
  })
}

defineExpose({
  open,
  close
});

</script>

<style scoped>
.hk1980Popup .content {
    padding: 20rpx;
    background-color: #fff;
    border-radius: 0px;
    /* height: 50vh; */
  }
.content .hk1980but .u-button--square{
  border-radius: 0px !important;
}
.content .hk1980but .u-reset-button::after{
  border-radius: 0px !important;
}
</style>

